<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="ck" />
		<hr />
		<div id="div">
			<input type="checkbox"/><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" />
		</div>
    
        //JS代码
        <script type="text/javascript">
  // 1）给最上面的复选框绑定一个点击事件（onclick 点击事件）
  document.getElementById('ck').onclick = function () {
        // 2）当一点击最上面的复选框的时候立刻获取下面所有的复选框
        //this表示调用当前点击事件onclick的标签对象即最上面的复选框对象<input type="checkbox" id="ck" />
        // console.log(this.checked);//被选中，checked的值是true，不被选中，值是false
        let oDiv = document.getElementById('div');
        //下面所有的复选框
        let arrInputs = oDiv.children;
        //3）遍历获取下面每个复选框
        for (let i = 0; i < arrInputs.length; i++) {
            //每个复选框
            let oInput = arrInputs[i];
            //4）将最上面复选框此时checked的值赋值给下面每个复选框
            //this表示最上面复选框的标签对象，this.checked 表示最上面复选框的checked的值
            //最上面复选框的值是什么就将值赋值给下面每个复选框
            oInput.checked=this.checked;
        }
    }



       </script>




	</body>
</html>
